<template>
  <div>
    <div v-for="(item, index) in meteorNumber"
         ref="meteor-item"
         :key="index"
         class="meteor"
         :style="`transform:rotate(${rotateDeg}deg)`">
      <div class="line"
           :style="`animationDelay:${delay}s;width:${w}px;height:${h}px;`"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MeteorComponent',
  mounted () {
    this.randomStar()
    this.timer = setInterval(() => {
      this.randomStar()
    }, 6000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  props: {
    meteorNumber: {
      type: Number,
      default: 0
    },
    delay: {
      type: Number,
      default: 0
    },
    w: {
      type: Number,
      default: 0
    },
    h: {
      type: Number,
      default: 0
    },
    rotateDeg: {
      type: Number,
      default: 0
    }
  },
  methods: {
    randomStar () {
      const meteorArr = this.$refs['meteor-item']
      meteorArr.forEach(item => {
        item.style.top = Math.floor(Math.random() * 720 + 1) + 'px'
        item.style.left = Math.floor(Math.random() * 1536 + 1) + 'px'
      })
    }
  }
}
</script>

<style lang='less' scoped>
.meteor {
  width: 2px;
  height: 200px;
  position: absolute;
  .line {
    animation: meteoring 6s infinite linear;
    position: absolute;
    width: 2px;
    height: 200px;
    background: linear-gradient(
      to top,
      rgb(2, 161, 195, 1),
      rgba(11, 36, 66, 0.1)
    );
    border-radius: 2px;
    box-shadow: 0px 10px 20px 0px #02a1c3;
    opacity: 0;
    &::before {
      width: 2px;
      height: 2px;
      content: "";
      position: absolute;
      bottom: 0px;
      left: 0px;
      border-radius: 50%;
      background: #00d0ff;
      box-shadow: 0px 0px 12px 5px #00d0ff;
    }
  }
}
@keyframes meteoring {
  0% {
    opacity: 0;
    top: -250px;
  }
  25% {
    opacity: 0.5;
    top: 0px;
  }
  50% {
    opacity: 0.8;
    top: 250px;
  }
  75% {
    opacity: 1;
    top: 500px;
  }
  100% {
    opacity: 0;
    top: 750px;
  }
}
</style>
